<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/vue.js"></script>
    <script type="text/javascript" src="static/js/index.js"></script>
    <script type="text/javascript" src="static/js/axios.min.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <title>Document</title>
</head>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        #app {
            width: 100%;

        }
    </style>
<body>
    <div id="app">
        <!--标题-->
        <el-row>
            <div style="width: 100%;height:47px;background-color: whitesmoke;padding-top: 15px" >
                <el-lable style="font-size: 20px">
                    公司基本信息
                </el-lable>
            </div>

        </el-row>
        <br>
        <!--1公司名称-->
        <el-row>
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="2" style="padding-top: 6px">公司名称</el-col>
            <el-col :span="8">
                <el-input
                        v-model="name"
                        size="medium"
                        placeholder="请输入公司名称"
                        style="width: 300px"
                ></el-input>
            </el-col>
            <el-col :span="2" style="padding-top: 6px">公司简称</el-col>
            <el-col :span="8">
                <el-input
                        v-model="simpleName"
                        size="medium"
                        placeholder="请输入公司简称"
                        style="width: 300px"
                ></el-input>
            </el-col>
        </el-row>
        <br>
        <!--2邮箱-->
        <el-row>
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="2" style="padding-top: 6px">邮箱</el-col>
            <el-col :span="8">
                <el-input
                        v-model="email"
                        size="medium"
                        placeholder="请输入邮箱"
                        style="width: 300px"
                ></el-input>
            </el-col>
            <el-col :span="2" style="padding-top: 6px">电话</el-col>
            <el-col :span="8">
                <el-input
                        v-model="phone"
                        size="medium"
                        placeholder="请输入联系电话"
                        style="width: 300px"
                ></el-input>
            </el-col>
        </el-row>
        <br>
        <!--3地址-->
        <el-row>
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="2" style="padding-top: 6px">地址</el-col>
            <el-col :span="8">
                <el-input
                        v-model="address"
                        size="medium"
                        placeholder="请输入地址"
                        style="width: 300px"
                ></el-input>
            </el-col>
            <el-col :span="2" style="padding-top: 6px">统一信用代码</el-col>
            <el-col :span="8">
                <el-input
                        v-model="code"
                        size="medium"
                        placeholder="请输入信用代码"
                        style="width: 300px"
                ></el-input>
            </el-col>
        </el-row>
        <br>
        <!--4公司法人-->
        <el-row>
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="2" style="padding-top: 6px">公司法人</el-col>
            <el-col :span="8">
                <el-input
                        v-model="legalPerson"
                        size="medium"
                        placeholder="请输入法人姓名"
                        style="width: 300px"
                ></el-input>
            </el-col>
            <el-col :span="2" style="padding-top: 6px">法人身份证</el-col>
            <el-col :span="8">
                <el-input
                        v-model="legalPersonIdcard"
                        size="medium"
                        placeholder="请输入法人身份证号码"
                        style="width: 300px"
                ></el-input>
            </el-col>
        </el-row>
        <br>
        <!--5合同章-营业执照-->
        <el-row>
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="2" style="padding-top: 6px">上传合同章</el-col>
            <el-col :span="8">
                <el-upload
                        class="avatar-uploader"
                        action="com/importImg"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess1">
                    <img v-if="contractSealPath" :src="contractSealPath" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-col>
            <el-col :span="2" style="padding-top: 6px">营业执照</el-col>
            <el-col :span="8">
                <el-upload
                        class="avatar-uploader"
                        action="com/importImg"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess2">
                <img v-if="businessLicensePath" :src="businessLicensePath" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-col>
        </el-row>
        <br>
        <!--6公司log-->
        <el-row>
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="2" style="padding-top: 6px">公司log</el-col>
            <el-col :span="8">
                <el-upload
                        class="avatar-uploader"
                        action="com/importImg"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess3">
                    <img v-if="logoPath" :src="logoPath"  class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-col>
        </el-row>
        <br>
        <!--7公司描述-->
        <el-row>
            <el-col :span="2">&nbsp;</el-col>
            <el-col :span="2" style="padding-top: 6px">公司描述</el-col>
            <el-col :span="18">
                <el-input
                        v-model="companyDesc"
                        size="medium"
                        placeholder="请输入公司名称"
                        style="width: 810px"
                ></el-input>
            </el-col>
        </el-row>
        <!--8保存按钮-->
        <br>
        <el-row>
            <el-col :span="10">&nbsp;</el-col>
            <el-col :span="2">
                <el-button type="primary" @click="save()">保存</el-button>
            </el-col>
        </el-row>
    </div>
</body>


    <script type="text/javascript" th:inline="javascript">

        let appDemo = new Vue({
            el: "#app", //绑定的div
            data() {
                return {
                  name:"",  //公司名称
                  simpleName:"",  //公司简称
                  email:"",  //邮箱
                  phone:"",   //联系电话
                  address:"",  //地址
                  code:"",  //信用代码
                  legalPerson:"",  //法人
                  legalPersonIdcard:"",  //法人身份证
                  contractSeal:"",  //合同章
                  businessLicense:"",  //营业执照
                  logo:"",  //公司log
                  companyDesc:"",     //公司描述
                  contractSealPath:"",  //合同章路径
                  businessLicensePath:"",  //营业执照路径
                  logoPath:"",  //公司log路径
                };
            },
            methods: {
                //新增数据
                save : function () {
                    if(this.name=='' || this.simpleName=='' || this.email==''|| this.phone==''|| this.address ==''
                        || this.code==''|| this.legalPerson==''|| this.legalPersonIdcard=='' || this.companyDesc==''){
                        this.$message.error("新增内容每一项都不能为空");
                    }else {
                        axios.get("com/save", {
                                params: {
                                    name:this.name,  //公司名称
                                    simpleName:this.simpleName,  //公司简称
                                    email:this.email,  //邮箱
                                    phone:this.phone,   //联系电话
                                    address:this.address,  //地址
                                    code:this.code,  //信用代码
                                    legalPerson:this.legalPerson,  //法人
                                    legalPersonIdcard:this.legalPersonIdcard,  //法人身份证
                                    contractSeal:this.contractSeal,  //合同章
                                    businessLicense:this.businessLicense,  //营业执照
                                    logo:this.logo,  //公司log
                                    companyDesc:this.companyDesc,     //公司描述
                                }
                            }, {emulateJSON: true},
                            {
                                headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}
                            }
                        ).then(reponse=>{
                            if(reponse.data.code == 200){
                                this.$message({
                                    message: '新增成功',
                                    type: 'success'
                                });
                                window.location.href="company_detail";
                            }else {
                                this.$message.error('新增失败');
                            }
                        })  //axios结束
                    }
                },
                //上传合同章的回调
                handleAvatarSuccess1(res){
                    console.log(res);
                    this.contractSeal= res.data;
                    this.contractSealPath = "com/getData?fileName=" + res.data;
                },
                //上传营业执照的回调
                handleAvatarSuccess2(res){
                    console.log(res);
                    this.businessLicense= res.data;
                    this.businessLicensePath = "com/getData?fileName=" + res.data;
                },
                //上传公司log的回调
                handleAvatarSuccess3(res){
                    console.log(res);
                    this.logo= res.data;
                    this.logoPath = "com/getData?fileName=" + res.data;
                },
            },//method方法截止
        });

    </script>
</html>